<template>
  <div>
    <!-- 海报html元素 -->
    <van-nav-bar
      title="我的二维码"
      left-text="返回"
      left-arrow
      :fixed="true"
      :placeholder="true"
      z-index="20"
      @click-left="$router.back(-1)"
    >
      <template #right v-if="showShareShow">
        <van-icon name="share-o" size="18" @click="showShare" />
      </template>
    </van-nav-bar>
    <div class="background"></div>
    <div id="posterHtml" class="posterHtml" ref="posterHtml" v-show="show">
      <div>
        <img class="portrait" src="@/common/img/touxiang1.png" />
      </div>
      <div class="content">{{ user.slice(0, -4) + "****" }}的店铺</div>
      <img
        class="qrcode"
        src=""
        alt=""
        style="width: 24rem; height: 24rem"
        ref="imgRef"
      />
      <div>扫一扫上面的二维码图案，成为我的粉丝</div>
    </div>
    <div class="posterImg" v-if="posterImg"><img :src="posterImg" /></div>
  </div>
</template>
<script>
import { ref, nextTick } from "vue";
import QRCode from "qrcode";
import { useRoute } from "vue-router";
import { ImagePreview } from "vant";
import html2canvas from "html2canvas";
export default {
  setup() {
    const imgRef = ref(null);
    const posterImg = ref(null);
    const show = ref(true);
    const showShareShow = ref(false);
    const route = useRoute();
    const { parents_id, user } = route.params;
    const posterHtmlBg = ref(
      "http://bpic.588ku.com//back_origin_min_pic/21/07/09/b9d05ea8cc466530f5097e27fce8ba85.jpg!/fw/750/quality/99/unsharp/true/compress/true"
    );
    const posterHtml = ref(null);
    // 前往注册页面
    const qrurl =
      "http://www.higuang365.com/index.php/wap/passport-signup.html?parents_id=" +
      parents_id;

    const qr = async () => {
      QRCode.toDataURL(qrurl || "http://www.higuang365.com/index.php/wap").then(
        (url) => imgRef.value && (imgRef.value.src = url)
      );
      await nextTick();
      createPoster();
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        showShareShow.value = true;
      }
    };
    const imagePreview = () => {
      ImagePreview([imgRef.value.src]);
    };
    const createPoster = () => {
      // 生成海报
      const domObj = posterHtml.value;
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          // let e = doc.querySelector("#posterHtml");
          // console.log(doc);
          // e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        posterImg.value = canvas.toDataURL("image/png");
        show.value = false;
      });
    };
    const showShare = () => {
      let purl =
        "http://www.higuang365.com/public/images/d7/da/64/4b59ff412a0dd10557d482b222aa29f6e3840b4c.jpg?1477013943#h"; //可以是本地图片
      var surl =
        "http://www.higuang365.com/weidian/#/poster/" + parents_id + "/" + user; //分享的链接
      let msg = {
        title: "我的二维码", //标题
        content: "精彩嗨逛，乐享全球！", //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
    };

    qr();
    return {
      imgRef,
      imagePreview,
      posterImg,
      posterHtmlBg,
      posterHtml,
      show,
      user,
      showShare,
      showShareShow,
    };
  },
};
</script>

<style lang="scss" scoped>
.posterImg {
  width: 80vw;
  position: relative;
  z-index: 20;
  margin: 10rem auto;
  border-radius: 2rem;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.posterHtml {
  background: #fff;
  background-size: cover;
  height: 50rem;
  width: 30rem;
  position: relative;
  margin: auto;
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 2rem;
}
.qrcode {
  margin: 0 auto;
}
.background {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #fae7d9;
  z-index: 10;
}
.content {
  font-size: 2rem;
  font-weight: 550;
}
.portrait {
  width: 6rem;
  height: 6rem;
}
</style>
